<template>
	<cl-dialog title="添加客服" width="400px" :visible.sync="visible" :before-close="beforeClose" @close="close" :props="{
		top: '5vh',
		appendToBody: true,
		closeOnClickModal: false
	}">
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<!-- <el-form-item label="所属品牌" prop="bra_id">
				<cl-select
					style="width: 100%"
					v-model="form.bra_id"
					placeholder="请选择所属品牌"
					filterable
					@change="changeBarnd"
				>
					<el-option
						v-for="item in bizRefData.brand"
						:key="item.bra_id"
						:label="item.bra_name"
						:value="item.bra_id"
					/>
				</cl-select>
			</el-form-item> -->

			<el-form-item label="微信号" prop="wxk_userid">
				<cl-select v-model="form.wxk_userid" style="width: 100%" placeholder="请选择" filterable 
					:multiple-limit="20">
					<el-option :label="item.name" :value="item.userid" v-for="(item, index) in miniprogramList"
						:key="index" />
				</cl-select>
			</el-form-item>

			<el-form-item label="状态" prop="on">
				<el-radio-group v-model="form.on">
					<el-radio :label="1">上线</el-radio>
					<el-radio :label="0">下线</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			saving: false,
			form: {
				pool_id: undefined,//客服组ID
				corpid: "",
				wxk_userid:"",
				on:0
				// biz_id: null,
				// bra_id: null,
				// mini_id: [],
				// status:0
			},
			rules: {
				wxk_userid: [{ required: true, message: "请选择微信号" }],
				on: [{ required: true, message: "请选择状态" }],

			},
			// 小程序列表
			miniprogramList: []
		};
	},
	computed: {
		// bizRefData() {
		// 	let { biz_id } = this.form;
		// 	return this.getBizRefData(biz_id);
		// }
	},
	created() { },
	methods: {
		open(data = {}) {
			this.form.corpid = data.corpid;
			this.form.pool_id = data.id;


			// this.form.biz_id = data.biz_id;
			// this.form.bra_id = data.bra_id;

			this.visible = true;

			// const { biz_id } = this.form;
			// this.getBizRefBrand(biz_id);
			this.getProxyUserWechat();
		},
		beforeClose(done) {
			!this.saving && done();
		},
		close() {
			this.reset();
			this.visible = false;
		},
		reset() {
			this.form = {
				pool_id: undefined,//客服组ID
				corpid: "",
				wxk_userid:"",
				on:0
			};
			this.$refs.form.resetFields();
		},
		async getProxyUserWechat() {
			const { corpid } = this.form;
			const data = await this.$service.config.proxyUserWechat({
				corpid
			});
			console.log(data)

			this.miniprogramList = data
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				await this.$service.wx
					.userAdd({
						...this.form,
						wxk_userid:this.form.wxk_userid
					})
					.done(() => {
						this.saving = false;
					});
				this.$message.success("添加成功");
				this.close();
				this.$emit("confirm");
			});
		},
		changeBarnd() {
			this.getMiniprogramList();
		}
	}
};
</script>
